<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/*  相对定位，box2图片压到box1上 */
			div.box1{
				width: 400px;
				height: 400px;
				background: url(img/敖丙.png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 1;
			}
			div.box2{
				width: 300px;
				height: 300px;
				background: url(img/哪吒.png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父元素定位
		            功能：单一元素定位，元素在正常文档流中  推荐
				    position属性值：relative; 声明元素可以用相对定位意义
				    方向属性：left，right，top，bottom
				    堆叠顺序属性：z-index[属性值是数值，顺序越大，越靠前]
					
			       绝对定位：按照定位祖先[页面左上角]进行定位
					功能：脱离文档流，不占原空间
					方向属性和叠加属性、相对以及固定定位共用
					position属性值：absolute; 声明文员可以使用绝对定位
				   实际开发中：相对定位结合绝对定位一起使用
					          侧边栏、左栏、遮罩层【挂靠】
					案例：左栏弹出【html结构，语义化标签+css两种定位+js】
					
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>